<template>
    <div class="home">
        <div class="wrap">
            <img src="../assets/imgs/ac3e78e12f3ea034382b8a771d742962.png" class="wrap-one"/>
        </div>
        <div class="form-data">
            <a>
                <img src="../assets/imgs/head-logo.png" class="head-logo"/>
            </a>
            <div style="margin: auto 10% ">
                <el-form label-width="80px"  style="width: 345px;margin-top: 45px">
                    <el-form-item label="用户名">
                        <el-input v-model="loginName" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input placeholder="请输入密码" v-model="passWord" show-password></el-input>
                    </el-form-item>
                    <el-footer>
                        <el-button @click="login()" class="lang-btn log-btn new_log_btn" :class="loginName == '' || passWord == ''?'off':''" :disabled="loginName == '' || passWord == ''">
                            <font style="vertical-align: inherit;">登录</font>
                        </el-button>
                    </el-footer>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Login.vue",
        data(){
            return {
                loginName:'',
                passWord:''
            }
        },
        components: {
        },
        methods:{
            login:function () {
                console.log(this.loginName);
                console.log(this.passWord);
                let params = new URLSearchParams;
                params.append('login',this.loginName);
                params.append('pass',this.passWord);
                this.$axios.post('login',params).then(req=>{
                    if (req.status===200){
                        if (req.data !==''){
                            this.$message({message:'登录成功'});
                            this.$store.commit('changeLogin',req.data.token);
                            var user = JSON.stringify(req.data.staff);
                            sessionStorage.setItem('user',user);
                            var rankList = JSON.stringify(req.data.RankList);
                            sessionStorage.setItem('rankList',rankList);
                            this.$router.push({ name: 'Home' ,params:{menuList:req.data}});
                        }else {
                            this.$message.error('密码或账号错误');
                        }
                    }else {
                        this.$message.error('网络错误！！！');
                    }
                });
            },
            exit(){
                //退出登录，清空token
                console.log('退出');
                if (localStorage.getItem('Authorization') !==null){
                    localStorage.removeItem('Authorization');
                    sessionStorage.removeItem('user');
                }
                // this.$router.push('/');
            },
        },
        created() {
            this.exit();
        }
    }
</script>

<style scoped>
    .form-data .lang-btn.off {
        color: #a0a0a0;
        background-color: #e5e5e5;
    }
    .form-data .head-logo {
        position: absolute;
        top: -60px;
        left: 101px;
        width: 258px;
        height: 120px;
    }

    .form-data .lang-btn {
        width: 340px;
        font-size: 18px;
        font-weight: bold;
        color: white;
        height: 50px;
        line-height: 32px;
        text-align: center;
        margin: 20px auto;
        display: block;
        border-radius: 5px;
        cursor: pointer;
        background-color: #3D7EFF;
    }
    .home {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /*overflow-y: auto;*/
        overflow-x: hidden;
        height: 100vh;
        background-color: #2870ff;
    }
    .wrap {
        box-sizing: border-box;
        height: 100vh;
        background: url(../assets/imgs/reg_bg.jpg) no-repeat center;
        background-size: auto 100vh;
        position: relative;
    }
    .wrap-one{
        width: 550px;
        height: 400px;
        margin-left: -621px;
        position: fixed;
        top: 20%;

    }
    .lang-btn:hover {
        text-decoration: none;
    }
    .form-data {
        background-color: #ffffff;
        width: 460px;
        left: 50%;
        margin-left: 100px;
        border-radius: 20px;
        box-shadow: 0 0 30px rgba(0,0,0,.1);
        padding: 65px 0 30px 0;
        position: fixed;
        top: 27%;
    }
</style>
